<template>
  <el-menu :default-active="`/${$route.path.split('/')[1]}`" class="el-menu-vertical-demo"
    :style="{ width: isCollapse ? '4rem' : '170px' }" :collapse="isCollapse" router>
    <div class="logo">
      <img v-if="isCollapse" src="@/assets/img/apple-touch-icon.png" />
      <template v-else>
        <!-- <img src="@/assets/img/apple-touch-icon.png" style="width: 24px;" /> -->
        <!-- <span>管理系统</span> -->
        <span style="display: flex;flex-direction: column;">
          <p>面向开发人员</p>
          <p>的智能体管理</p>
          <p>服务子系统</p>
        </span>
          <!-- <p>评估子系统</p> -->
        <!-- 面向开发人员的智能体管理服务子系统 -->
      </template>
    </div>

    <template v-for="item in list">
      <template v-if="item.meta.routes">
        <el-submenu :index="item.path" :key="item.path">
          <template slot="title">
            <i :class="['menu-icon', {
            }]" :style="{ width: isCollapse ? '30px' : '24px', height: isCollapse ? '30px' : '24px' }" />
            <span slot="title">
            </span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="route.path" v-for="route in item.meta.routes" :key="route.path"
              :class="route.path === $route.path ? 'is-active' : ''">
              <i :class="['menu-icon', `menu-${route.meta.icon || item.meta.icon}`, {
              }]" :style="{ width: isCollapse ? '30px' : '24px', height: isCollapse ? '30px' : '24px' }" />
              {{ route.meta.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </template>

      <el-menu-item :index="item.path" :key="item.path" v-else>
        <i :class="['menu-icon', `menu-${item.meta.icon}`, {
        }]" :style="{ width: isCollapse ? '30px' : '24px', height: isCollapse ? '30px' : '24px' }" />
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </template>

    <div class="btn-collapse" @click="updateIsCollapse()"></div>
  </el-menu>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  props: ["list"],
  data() {
    return {
    };
  },
  methods: {
    ...mapActions(["updateIsCollapse"])
  },
  computed: mapState({
    breadcrumb: state => state.menuStore.breadcrumb,
    isCollapse: state => state.menuStore.isCollapse,
  }),
};
</script>

<style lang="less" scoped>
.logo {
  padding: 15px 20px 15px;

  .img {
    width: 100%;
    height: 24px;
    background: url(~@/assets/img/logo.png) no-repeat;
    background-size: 100%;
  }

  img {
    width: 100%;
  }


  display: flex;
  align-items: center;

  span {
    font-size: 18px;
    padding-left: 5px;
    letter-spacing: 4px;
  }
}
.el-menu-vertical-demo::-webkit-scrollbar{
  display: none
}

.el-menu-vertical-demo {
  height: 100%;
  background: #eee;
  box-shadow: -1px 0 10px rgba(#000, .2);
  border: 0px;
  position: relative;
  transition: width .1s;
  overflow: auto;

  .el-menu-item-group {
    background: #eee;
    overflow: hidden;
  }

  i {
    transition: all .1s;
  }

  span {
    margin-left: 10px;
  }
}

.el-menu--collapse {
  .el-menu-item * {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 13px;
  }
}

.btn-collapse {
  position: absolute;
  top: 23px;
  right: -35px;
  cursor: pointer;
  width: 14px;
  height: 12px;
  transform: scale(1.2);
  background: url(~@/assets/img/piston.png);
  background-size: 100% 100%;
}

.menu-icon {
  display: inline-block;
  margin: 0 auto;
}

.el-menu {
  z-index: 999;

  .is-active {
    background: #409EFF;

    * {
      color: #fff !important;
    }
  }
}
</style>
